<template>
  <view class="u-form-select">
    <u-input
      v-model:modelValue="inputValue"
      :fieldKey="fieldKey"
      :disabled="disabled"
      :type="type"
      :inputAlign="inputAlign"
      :placeholder="placeholder"
      :placeholderStyle="placeholderStyle"
      :maxlength="maxlength"
      :height="height"
      :fixed="fixed"
      :autoHeight="autoHeight"
      :border="border"
      :borderColor="borderColor"
      :confirmType="confirmType"
      :clearable="clearable"
      :focus="focus"
      :passwordIcon="passwordIcon"
      :style="[customStyle]"
      @click="handleClick"
    />
    <u-select
      v-model:modelValue="popupValue"
      v-model:pickValue="selectPickValue"
      :defaultValue="defaultValue"
      :mode="mode"
      :confirmText="confirmText"
      :confirmColor="confirmColor"
      :cancelText="cancelText"
      :cancelColor="cancelColor"
      :title="title"
      :maskCloseAble="maskCloseAble"
      :blur="blur"
      :safeAreaInsetBottom="safeAreaInsetBottom"
      :zIndex="zIndex"
      :selectedOption="selectedOption"
      :selectedValue="selectedValue"
      :selectedLabel="selectedLabel"
      :list="list"
      @confirm="handleConfirm"
      @update:modelValue="handleModelValueChange"
      @update:pickValue="handlePickValueChange"
      @updateSelected="handleUpdateSelected"
    />
  </view>
</template>

<script>
/**
 * form-select 输入框组合列选择器
 * @description 此选择器用于单列，多列，多列联动的选择场景。(从1.3.0版本起，不建议使用Picker组件的单列和多列模式，Select组件是专门为列选择而构造的组件，更简单易用。)
 * @tutorial http://uviewui.com/components/select.html
 * @property {String} mode 模式选择，"single-column"-单列模式，"mutil-column"-多列模式，"mutil-column-auto"-多列联动模式
 * @property {Array} list 列数据，数组形式，见官网说明
 * @property {Boolean} v-model 布尔值变量，用于控制选择器的弹出与收起
 * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配(默认false)
 * @property {String} cancel-color 取消按钮的颜色（默认#606266）
 * @property {String} confirm-color 确认按钮的颜色(默认#2979ff)
 * @property {String} confirm-text 确认按钮的文字
 * @property {String} cancel-text 取消按钮的文字
 * @property {String} default-value 提供的默认选中的下标，见官网说明
 * @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker(默认true)
 * @property {String Number} z-index 弹出时的z-index值(默认10075)
 * @property {String} value-name 自定义list数据的value属性名 1.3.6
 * @property {String} label-name 自定义list数据的label属性名 1.3.6
 * @property {String} child-name 自定义list数据的children属性名，只对多列联动模式有效 1.3.7
 * @event {Function} confirm 点击确定按钮，返回当前选择的值
 * @example <u-select v-model="show" :list="list"></u-select>
 */
import mpConfig from '../../libs/mixin/mp-vertual-node.js'

export default {
  name: 'u-form-select',
	options: mpConfig,
  props: {
    // 通过双向绑定控制组件的弹出与收起
    value: {
      type: Boolean,
      default: true,
    },
    modelValue: {
      type: Boolean,
      default: false,
    },
    // 列数据
    list: {
      type: Array,
      default() {
        return [];
      },
    },
    // "取消"按钮的颜色
    cancelColor: {
      type: String,
      default: '#606266',
    },
    // "确定"按钮的颜色
    confirmColor: {
      type: String,
      default: '#2979ff',
    },
    // 弹出的z-index值
    zIndex: {
      type: [String, Number],
      default: 0,
    },
    safeAreaInsetBottom: {
      type: Boolean,
      default: false,
    },
    // 是否允许通过点击遮罩关闭Picker
    maskCloseAble: {
      type: Boolean,
      default: true,
    },
    // 提供的默认选中的下标
    defaultValue: {
      type: Array,
      default() {
        return [0];
      },
    },
    // 模式选择，single-column-单列，mutil-column-多列，mutil-column-auto-多列联动
    mode: {
      type: String,
      default: 'single-column',
    },
    // 自定义value属性名
    valueName: {
      type: String,
      default: 'value',
    },
    // 自定义label属性名
    labelName: {
      type: String,
      default: 'label',
    },
    // 自定义多列联动模式的children属性名
    childName: {
      type: String,
      default: 'children',
    },
    // 顶部标题
    title: {
      type: String,
      default: '',
    },
    // 取消按钮的文字
    cancelText: {
      type: String,
      default: '取消',
    },
    // 确认按钮的文字
    confirmText: {
      type: String,
      default: '确认',
    },
    // 遮罩的模糊度
    blur: {
      type: [Number, String],
      default: 0,
    },
    // 用于回显的value
    pickValue: {
      type: Array,
      default() {
        return [];
      },
    },
    // 输入框的类型，textarea，text，number
    type: {
      type: String,
      default: 'select',
    },
    inputAlign: {
      type: String,
      default: '',
    },
    placeholder: {
      type: String,
      default: '请输入内容',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    maxlength: {
      type: [Number, String],
      default: 140,
    },
    placeholderStyle: {
      type: String,
      default: 'color: #c0c4cc;',
    },
    confirmType: {
      type: String,
      default: 'done',
    },
    // 如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true
    fixed: {
      type: Boolean,
      default: false,
    },
    // 是否自动获得焦点
    focus: {
      type: Boolean,
      default: false,
    },
    // 密码类型时，是否显示右侧的密码图标
    passwordIcon: {
      type: Boolean,
      default: true,
    },
    // input|textarea是否显示边框
    border: {
      type: Boolean,
      default: false,
    },
    // 输入框的边框颜色
    borderColor: {
      type: String,
      default: '#dcdfe6',
    },
    autoHeight: {
      type: Boolean,
      default: true,
    },
    // type=select时，旋转右侧的图标，标识当前处于打开还是关闭select的状态
    // open-打开，close-关闭
    selectOpen: {
      type: Boolean,
      default: false,
    },
    // 高度，单位rpx
    height: {
      type: [Number, String],
      default: '',
    },
    // 是否可清空
    clearable: {
      type: [Boolean, String],
    },
    // 指定光标与键盘的距离，单位 px
    cursorSpacing: {
      type: [Number, String],
      default: 0,
    },
    // 光标起始位置，自动聚焦时有效，需与selection-end搭配使用
    selectionStart: {
      type: [Number, String],
      default: -1,
    },
    // 光标结束位置，自动聚焦时有效，需与selection-start搭配使用
    selectionEnd: {
      type: [Number, String],
      default: -1,
    },
    // 是否自动去除两端的空格
    trim: {
      type: Boolean,
      default: true,
    },
    // 是否显示键盘上方带有”完成“按钮那一栏
    showConfirmbar: {
      type: Boolean,
      default: true,
    },
    // input的背景色
    backgroundColor: {
      type: String,
    },
    // input的padding
    padding: {
      type: String,
    },
  },
  emits: ['update:modelValue', 'update:pickValue', 'input', 'confirm', 'click'],
  data() {
    return {
      // 选择框是否弹出
      popupValue: false,
      // 选择器选中的值
      selectPickValue: [],
      // 输入框回显的值
      inputValue: '',
    };
  },
  watch: {
    // 在select弹起的时候，重新初始化所有数据
    value: {
      immediate: true,
      handler(val) {
        this.popupValue = val;
      },
    },
    modelValue: {
      immediate: true,
      handler(val) {
        this.popupValue = val;
      },
    },
    pickValue: {
      immediate: true,
      deep: true,
      handler(val) {
        this.selectPickValue = val;
      },
    },
  },
  methods: {
    handleClick() {
      // 设置禁用后，不触发点击事件，下拉框不弹出
      if (this.disabled) {
        return;
      }
      this.$emit('click');
      this.$emit('input', true);
      this.popupValue = true;
      this.$emit('update:modelValue', true);
    },
    handleConfirm(selectValue) {
      this.$emit('confirm', selectValue);
      this.inputValue = selectValue.map((item) => item.label).join('-');
    },
    handleUpdateSelected(pickerValue) {
      this.inputValue = pickerValue
        .map((item) => item.label)
        .join('-')
        .trim();
    },
    handleModelValueChange(val) {
      this.$emit('update:modelValue', val);
    },
    handlePickValueChange(val) {
      this.$emit('input', val);
      this.$emit('update:pickValue', val);
    },
  },
};
</script>
